<template>
  <el-dialog v-model="props.dialogAvatarVisible" title="请选择图片" width="50vh" @close="closeDialog" center >
    <div class="upload-container">
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :multiple="false"
        name="avatar"
        :headers="uploadHeader"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarError"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script setup>
import { BASE_URL } from '@/config';
import { ref, defineProps, defineEmits } from 'vue';
import { ElMessage } from 'element-plus'

// 接收父组件传递的 props 数据
const props = defineProps({
  dialogAvatarVisible: {
    type: Boolean,
    default: false
  }
});

// 上传URL和请求头配置
const uploadUrl = BASE_URL + '/api/user/set_avatar/';
const uploadHeader = {
  Authorization: `Bearer ${JSON.parse(localStorage.getItem('token'))}`
};


const imageUrl = ref('')
// 触发父组件更新 dialogAvatarVisible 的事件
const emit = defineEmits(['update:dialogAvatarVisible']);

// 关闭弹窗
const closeDialog = () => {
  emit('update:dialogAvatarVisible', false);
};

// 头像上传成功后处理函数
const handleAvatarSuccess = (
  response,
  uploadFile
) => {
   // 创建一个临时的图片 URL 来展示头像预览
  imageUrl.value = URL.createObjectURL(uploadFile.raw)

   // 如果返回的 code 为 200，表示上传成功
  if (response.code === 200){
    // 将用户信息存储到 localStorage 中
    localStorage.setItem('userInfo',JSON.stringify(response.data))

    // 刷新页面
    window.location.reload();  // 或者使用 this.$router.go(0) 进行页面刷新

    // 关闭弹窗
    emit('update:dialogAvatarVisible', false),

    ElMessage.success({message:response.msg,duration:1000})
  }
  else if (response.code === 1003){
    // 清空浏览器存储
    localStorage.clear();

    // 跳到登录页面
    window.location.href ='/login';

    // 显示错误信息
    ElMessage.error({
      message: response.msg || '登录信息已过期，请重新登录',
      duration: 2000,
    });
  }
  // 其他情况，直接展示错误信息
  else {
    ElMessage.error({
      message: response.msg || '上传失败，请稍后再试。',
      duration: 2000,
    });
  }
}

const handleAvatarError = (
  response,
  uploadFile,
) => {
    // 如果后端返回了错误响应
    const status = response.status;
    console.log("status is :",status)
    // 统一处理不同的 HTTP 错误状态
    switch (status) {
          case 401:
            ElMessage.error('认证失败，请重新登录');
            localStorage.clear()
            window.location.href = '/login'
            ElMessage.error({
              message: '认证失败！',
              duration: 1000 // 消息显示的持续时间，单位为毫秒
            });
            break;
          case 404:
            ElMessage.error('请求的接口不存在或路径错误');
            break;
          case 500:
            ElMessage.error('服务器出错，请稍后再试');
            break;
          default:
            ElMessage.error(`请求失败：${error.message}`);
            break;
        }
    emit('update:dialogAvatarVisible', false)
}

// 上传前验证文件格式和大小
const beforeAvatarUpload= (rawFile) => {
  // 定义支持的文件类型
  const supportedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'];
   // 验证文件类型
   if (!supportedTypes.includes(rawFile.type)) {
    ElMessage.error('头像文件类型仅支持 JPG, PNG, GIF, jpeg 四种格式');
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图像文件大小不得超过2MB!')
    return false
  }
  return true
}

</script>

<style scoped>
.upload-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100%;            /* 确保容器的高度填满父容器 */
}

.el-upload {
  display: flex;
  justify-content: center; /* 确保上传区域内的内容居中 */
  align-items: center;
  width: 100%;             /* 使上传区域宽度适应父容器 */
  height: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border:1px dashed aqua;
}
</style>
